<template>
  <CustomModal
    title="食材删除"
    v-model="visible"
    isTabbar
    :showCancelButton="false"
    confirmText="确定"
    @confirm="modelConfirm"
  >
    <view class="nw-content">
      <view class="nw-tip">请确认是否删除如下食材？</view>
      <view class="nw-name">{{ row.name }}</view>
    </view>
  </CustomModal>
</template>

<script setup>
defineOptions({
  name: 'DeleteIngredient',
  inheritAttrs: false
})

const props = defineProps({
  row: {
    type: Object,
    default: () => {}
  }
})
const visible = defineModel({
  type: Boolean,
  default: false
})
const emit = defineEmits(['confirm'])

onMounted(_ => {
  //
})

const modelConfirm = e => {
  visible.value = false
  emit('confirm')
}
</script>

<style lang="scss" scoped>
.nw-content {
  margin: 64rpx 0 54rpx;
  .nw-tip {
    text-align: center;
    font-size: 24rpx;
    font-weight: 400;
    color: var(--color-333);
  }
  .nw-name {
    margin-top: 52rpx;
    text-align: center;
    font-size: 26rpx;
    font-weight: 400;
    color: var(--color-333);
  }
}
</style>
